<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form ref="form" :model="form" label-position="top">
            <el-form-item label="视频链接方式：">
                <el-radio v-model="form.radio" label="1">自定义上传</el-radio>
                <!-- <el-radio v-model="form.radio" label="2">手动填写</el-radio> -->
                <el-radio v-model="form.radio" label="3">素材中心</el-radio>
            </el-form-item>
            <el-form-item label="视频上传：" v-if="form.radio == '1'">
                <el-upload class="upload-demo" :action="url" :headers="header" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" multiple
                    :limit="1" :file-list="fileList">
                    <el-button size="mini" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <!-- <el-form-item label="手动填写：" v-if="form.radio == '2'">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-form-item> -->
            <el-form-item label="素材中心：" v-if="form.radio == '3'">
                <el-button size="mini" type="primary" @click="dialogTableVisible = true">选择</el-button>
            </el-form-item>
            <el-form-item label="自动播放：">
                <el-radio v-model="form.autoplay" label="autoplay">是</el-radio>
                <el-radio v-model="form.autoplay" label="">否</el-radio>
            </el-form-item>
            <el-form-item label="循环播放：">
                <el-radio v-model="form.loop" label="loop">是</el-radio>
                <el-radio v-model="form.loop" label="">否</el-radio>
            </el-form-item>
            <el-form-item label="静音播放：">
                <el-radio v-model="form.muted" label="muted">是</el-radio>
                <el-radio v-model="form.muted" label="">否</el-radio>
            </el-form-item>
            <el-form-item label="播放控件显示：">
                <el-radio v-model="form.controls" label="controls">是</el-radio>
                <el-radio v-model="form.controls" label="">否</el-radio>
            </el-form-item>
        </el-form>


        <el-dialog title="图片列表" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" height="500px">
                <el-table-column label="文件展示" align="center" prop="fileUrl">
                    <template #default="scope">
                        <video v-if="scope.row.fileSuffix == 'video/mp4'" type="video/mp4"
                            style="width: 100px; height: 100px" :src="scope.row.fileUrl"></video>
                        <el-image v-else style="width: 100px; height: 100px" :src="scope.row.fileUrl"
                            fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable="custom">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="name" label="文件名称" width="200"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="选择" placement="top">
                            <el-button v-hasPermi="['iot:file:remove']" link size="mini" type="text"
                                @click="handleSelect(scope.row)">选择</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                :total="total" @pagination="getFile" />
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import CommonAttr from '../common/CommonAttr.vue'
import { list } from '@/api/file';
export default {
    name: '',
    props: {},
    data() {
        return {
            dialogTableVisible: false,
            form: {
                radio: '1',
                video: '',
                autoplay: "autoplay",
                controls: "controls",
                loop: "loop",
                muted: 'muted'
            },
            fileList: [],
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
            gridData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: "",
                createTime: ""
            },
            total: 0
        }
    },
    components: {
        CommonAttr
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getFile()
    },
    methods: {
        getFile() {
            list({
                pageNum: 1,
                pageSize: 10
            }).then((res) => {
                this.gridData = res.rows
                this.total = res.total
            });
        },
        handleAvatarSuccess(res, file) {
            this.$store.state.curComponent.propValue.url = res.data.url
            console.log(res, file)
            this.$store.commit('setCurComponentNew', this.$store.state.curComponent)
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        },
        handleSelect (file) {
            if (file.fileSuffix == 'image/jpeg' || file.fileSuffix == 'image/png') {
                this.$message.error('不允许选择图片');
                return;
            }
            this.$store.state.curComponent.propValue.url = file.fileUrl
            this.dialogTableVisible = false
        }
    },
}
</script>

<style scoped></style>
